<template>
  <div class="merge-order-con">
    <div class="table-con">
      <a-spin :loading="loading" style="width: 100%; height: 100%">
        <a-scrollbar style="height: 100%; overflow: auto">
          <div class="item-con" v-if="tableData[0]">
            <div class="item" v-for="item of tableData" :key="item.id">
              <div class="top">
                <div class="shop lh50 fl">
                  <div class="label-text fl">店铺：</div>
                  <div class="bill-no fl"> {{ item.shopName }} </div>
                </div>
                <div class="order-billNo lh50 fl">
                  <div class="label-text fl">买家：</div>
                  <div class="bill-no fl"> {{ item.buyerName }} </div>
                </div>
                <div class="user-info fl lh50">
                  <div class="label-text fl">收货信息：</div>
                  <div class="address-info fl">{{ $extract(item, 'address.userName') }}</div>
                  <div class="address-info fl">{{ $extract(item, 'address.country') }}{{ $extract(item, 'address.countryCode') }}</div>
                  <div class="address-info fl" style="border-right: none">{{ $extract(item, 'address.stateOrRegion') }}</div>
                  <a-popover>
                    <a-button type="text" class="fl"><icon-down style="font-size: 30px; margin-top: 15px" /></a-button>
                    <template #content>
                      <div style="width: 300px">
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">收件人：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.userName') }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">国家：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.country') }}{{ $extract(item, 'address.countryCode') ? `(${$extract(item, 'address.countryCode')})` : '' }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">省/州：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.stateOrRegion') }}{{ $extract(item, 'address.stateOrRegionCode') ? `(${$extract(item, 'address.stateOrRegionCode')})` : '' }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">城市：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.city') }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">电话：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.phoneNumber') }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">邮编：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.postalCode') }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">地址1：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.address') || '--' }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">地址2：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.address1') || '--' }}</div>
                        </div>
                        <div style="overflow: hidden">
                          <div class="label-text info-item fl">地址3：</div>
                          <div style="width: 240px; float: left">{{ $extract(item, 'address.address2') || '--' }}</div>
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </div>
                <div class="fr lh50 mr10">
                  <a-button type="primary" @click="mergeOrderHandleBtnClick(item)">合并订单</a-button>
                </div>
              </div>
              <div class="bottom">
                <a-table size="mini" v-model:selected-keys="selectRowobj[item.id]" row-key="id" :bordered="{ cell: true }" :row-selection="{ type: 'checkbox', showCheckedAll: true }" :pagination="false" class="table-single-line" :data="item.orderList">
                  <template #columns>
                    <a-table-column title="平台订单号" #cell="{ record }" :width="140">
                      {{ record.platformOrderNumber }}
                    </a-table-column>
                    <a-table-column title="图片" #cell="{ record }" :width="60">
                      <div v-for="item of record.itemList" class="bt" style="text-align: center">
                        <ImgPopover :src="getImage(item)">
                          <template #con>
                            <img width="40" height="40" :src="getImage(item)" style="margin-top: 10px" />
                          </template>
                        </ImgPopover>
                      </div>
                    </a-table-column>
                    <a-table-column title="商品" #cell="{ record }" :width="140">
                      <div v-for="item of record.itemList" class="bt clearfix">
                        <TextHidden position="top" :rows="1">{{ item.productName ? item.productName : '--' }}</TextHidden>
                        <TextHidden position="top" :rows="1">{{ item.asin ? item.asin : '--' }}</TextHidden>
                        <TextHidden position="top" :rows="1">{{ item.msku ? item.msku : '--' }}</TextHidden>
                      </div>
                    </a-table-column>
                    <a-table-column title="产品SKU" #cell="{ record }" :width="100">
                      <div v-for="item of record.itemList" class="bt lh60">
                        <TextHidden position="top" :rows="1">{{ item.productSku }}</TextHidden>
                      </div>
                    </a-table-column>
                    <a-table-column title="类目" #cell="{ record }" :width="100">
                      <div v-for="item of record.itemList" class="bt lh60">
                        {{ item.productCategoryName }}
                      </div>
                    </a-table-column>
                    <a-table-column title="销售员" #cell="{ record }" :width="60">
                      <div v-for="item of record.itemList" class="bt lh60">
                        {{ item.salerName }}
                      </div>
                    </a-table-column>
                    <a-table-column title="售价" #cell="{ record }" :width="60">
                      <div v-for="item of record.itemList" class="bt lh60"> {{ currencyObj[item.currency] }}{{ item.amtSell }} </div>
                    </a-table-column>
                    <a-table-column title="优惠金额" #cell="{ record }" :width="140">
                      <div v-for="item of record.itemList" class="bt lh60"> {{ currencyObj[item.currency] }}{{ item.amtDiscount }} </div>
                    </a-table-column>
                    <a-table-column title="下单时间(+8)" #cell="{ record }" :width="140">
                      <div v-for="item of record.itemList" class="bt lh60">
                        {{ $setTime(record.gmtPurchase) }}
                      </div>
                    </a-table-column>
                    <a-table-column title="承诺发货时间" #cell="{ record }" :width="140">
                      <div v-for="item of record.itemList" class="bt" style="padding-top: 10px">
                        <div>{{ $setTime(record.gmtLatestShip) }}</div>
                        <div>剩余：<a-countdown :value="new Date(record.gmtLatestShip).valueOf()" :now="now" format="D 天 H 时" /></div>
                      </div>
                    </a-table-column>
                    <a-table-column title="操作" #cell="{ record }" :width="60">
                      <a-button type="text" @click="cancelMerge('single', record, item)">取消合并</a-button>
                    </a-table-column>
                  </template>
                </a-table>
              </div>
            </div>
          </div>
          <a-empty v-else />
        </a-scrollbar>
      </a-spin>
    </div>
    <div class="mt10">
      <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>
  </div>

  <SubmitMergeOrder ref="submitMergeOrder" :tobeCombineOrderId="tobeCombineOrderId" :list="selOrderItem" @save="mergeOrderSave" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { tobeCombineOrderPage, cancelTobeCombine } from '@/api/order'
  import SubmitMergeOrder from './submitMergeOrder.vue'
  import { currencySymbol } from '@/utils/globalData'
  import { Message, Modal } from '@arco-design/web-vue'
  import { watch } from 'vue'
  export default defineComponent({
    props: ['searchValue', 'statusCurrentIndex'],
    components: {
      SubmitMergeOrder,
    },
    setup(props: any, { emit }) {
      const submitMergeOrder = ref()
      const data: any = reactive({
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        tableData: [],
        selectRowobj: {},
        now: Date.now(),
        loading: false,
        selOrderItem: [],
        currencyObj: currencySymbol,
        targetOrderId: '',
        tobeCombineOrderId: '',
        orderSearchValue: {},
      })
      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.orderSearchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await tobeCombineOrderPage(params)
        data.loading = false
        data.tableData = res?.data?.records
        data.pageNation.total = res?.data?.total
        data.selectRowobj = {}

        data.tableData.forEach((e: any) => {
          data.selectRowobj[e.id] = []
        })
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0]
        } else {
          return item.productPic
        }
      }

      const mergeOrderHandleBtnClick = (item: any) => {
        if (data.selectRowobj[item.id].length < 2) {
          return Message.error('合并的数据最小需要两个订单')
        }

        data.tobeCombineOrderId = item.id
        data.selOrderItem = []

        let selIdArr = data.selectRowobj[item.id]
        let allOrderArr: any = []
        data.tableData.forEach((e: any) => {
          if (e.id == item.id) {
            allOrderArr = e.orderList
          }
        })

        selIdArr.forEach((e: string) => {
          let info = allOrderArr.find((el: any) => e == el.id)
          info.address = item.address
          data.selOrderItem.push(info)
        })

        submitMergeOrder.value.visible = true
      }

      const mergeOrderSave = () => {
        for (const key in data.selectRowobj) {
          data.selectRowobj[key] = []
        }
        getList()
      }

      const cancelMerge = (type: string, item: any, firstItem: any) => {
        if (type == 'mul') {
          let flag = false
          for (const key in data.selectRowobj) {
            if (data.selectRowobj[key][0]) {
              flag = true
              break
            }
          }
          if (!flag) {
            return Message.error('请选择需要合并的数据')
          }
        }

        Modal.confirm({
          title: '取消合并',
          content: `请再次确认是否需要取消合并订单？`,
          cancelText: '取消',
          okText: '确认',
          titleAlign: 'start',
          onOk: async () => {
            let params: any = []
            if (type == 'single') {
              let obj = {
                tobeCombineOrderId: firstItem.id,
                orderIdList: [item.id],
              }
              params.push(obj)
            } else {
              for (const key in data.selectRowobj) {
                if (data.selectRowobj[key][0]) {
                  let obj = {
                    tobeCombineOrderId: key,
                    orderIdList: data.selectRowobj[key],
                  }
                  params.push(obj)
                }
              }
            }
            const res: any = await cancelTobeCombine(params)
            if (res) {
              Message.success('取消合并成功')
              mergeOrderSave()
            }
          },
        })
      }

      watch(
        () => props.searchValue,
        (val) => {
          if (props.statusCurrentIndex == 11) {
            data.orderSearchValue = val
            data.pageNation.pageNum = 1
            getList()
          }
        }
      )

      getList()

      return {
        ...(toRefs(data) as any),
        changePage,
        sizeChange,
        getImage,
        getList,
        submitMergeOrder,
        mergeOrderHandleBtnClick,
        mergeOrderSave,
        cancelMerge,
      }
    },
  })
</script>

<style lang="less" scoped>
  :deep(.arco-statistic-value) {
    font-size: 14px !important;
    color: #4080ff;
  }

  .lh50 {
    line-height: 50px;
  }

  .lh40 {
    line-height: 40px;
  }
  .lh60 {
    line-height: 60px;
  }

  .arco-scrollbar {
    height: 100% !important;
    width: 100% !important;
  }

  .bt {
    border-bottom: 1px solid #d7d7d7;
    height: 60px;
    &:last-child {
      border-bottom: none;
    }
  }

  .merge-order-con {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    .table-con {
      width: 100%;
      // border: 1px solid red;
      display: flex;
      flex: 1;
      .item-con {
        height: 100%;
        .item {
          border: 1px solid #d7d7d7;
          margin-bottom: 10px;
          .top {
            height: 50px;
            background-color: #f2f3f5;
            width: 100%;
            .shop {
              // width: 140px;
              margin-left: 10px;
              display: inline-block;
              .shop-name {
                margin-left: 5px;
                // margin-top: 14px;
              }
            }

            .order-billNo {
              margin: 0 20px;
              display: inline-block;
              .bill-no {
                display: flex;
                align-items: center;
                :deep(.arco-typography) {
                  margin-bottom: 0;
                  margin-top: 14px;
                }
              }
            }
            .user-info {
              margin-right: 10px;

              .address-info {
                padding: 0 10px;
                border-right: 1px solid #d7d7d7;
                &:last-child {
                  border: none;
                }
              }
            }
          }

          .bottom {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
</style>
